import React, { Component } from 'react';
import { Modal, Radio, Input, Space, Switch, Tag } from 'antd';
import { RightOutlined } from '@ant-design/icons';
import styles from '../index.module.scss';

interface AuthAssignmentProps {
	visible: any;
	okHandle: Function;
	cancelHandle: Function;
}

class AuthAssignment extends Component<AuthAssignmentProps> {
	state = {
		authData: {
			tags: [ 'David', 'David', 'David' ],
		},
	};
	okHandle = () => {
		this.props.okHandle( this.state.authData );
	};
	handleTagClose = ( tag: string ) => {};
	render() {
		let { visible, cancelHandle } = this.props;
		return (
			<div>
				<Modal
					visible={visible}
					title={<span style={{ paddingLeft: '20px' }}>权限分配</span>}
					cancelText="取消"
					okText="确定"
					onOk={this.okHandle}
					onCancel={() => {
						cancelHandle();
					}}
				>
					<div className={styles.auth_container}>
						<div className={styles.auth_item}>
							<div style={{ marginBottom: '10px' }}>
								<div className={styles.auth_itemtitle}>
									<span className={styles.icon}>
										<RightOutlined />
									</span>
									报表可见权限：
								</div>

								<Radio.Group>
									<Radio value={1}>默认</Radio>
									<Radio value={2}>自定义</Radio>
								</Radio.Group>
							</div>

							<div className={styles.auth_content}>
								<Space direction="vertical">
									<Radio.Group defaultValue="a" buttonStyle="solid">
										<Radio.Button value="a">租户</Radio.Button>
										<Radio.Button value="b">集团</Radio.Button>
										<Radio.Button value="c">公司</Radio.Button>
										<Radio.Button value="d">部门</Radio.Button>
										<Radio.Button value="e">人员</Radio.Button>
									</Radio.Group>
									<Input placeholder="请输入内容" />
									<Space style={{ margin: '10px 0' }}>
										{this.state.authData.tags.map( ( tag, index ) => {
											const tagElem = (
												<Tag
													className="edit-tag"
													key={tag}
													closable
													color="processing"
													onClose={() => this.handleTagClose( tag )}
												>
													<span>{tag}</span>
												</Tag>
											);
											return tagElem;
										} )}
									</Space>
								</Space>
							</div>
						</div>
						<div className={styles.auth_item}>
							<div style={{ marginBottom: '10px' }}>
								<div className={styles.auth_itemtitle}>
									<span className={styles.icon}>
										<RightOutlined />
									</span>
									报表编辑权限：
								</div>
								<Radio.Group>
									<Radio value={1}>默认</Radio>
									<Radio value={2}>自定义</Radio>
								</Radio.Group>
							</div>
						</div>
						<div className={styles.auth_item}>
							<div style={{ marginBottom: '10px' }}>
								<div className={styles.auth_itemtitle}>
									<span className={styles.icon}>
										<RightOutlined />
									</span>
									是否启用自动编辑：
								</div>
								<Radio.Group>
									<Radio value={1}>是</Radio>
									<Radio value={2}>否</Radio>
								</Radio.Group>
							</div>
						</div>
						<div className={styles.auth_item}>
							<div style={{ marginBottom: '10px' }}>
								<div className={styles.auth_itemtitle}>
									<span className={styles.icon}></span>
									<div className={styles.auth_itemtitle}>是否启用：</div>
								</div>
								<Switch defaultChecked />
							</div>
						</div>
					</div>
				</Modal>
			</div>
		);
	}
}

export default AuthAssignment;
